<template>
    <div class="total">
        <div class="middle">
            <p class="font">点此导出系统模型</p>
            <el-button type="primary" @click="handleExport">
                点击导出
            </el-button>
        </div>
        
        <div class="upload-div">
            <p class="font">点此上传系统模型</p>
            <el-upload
                class="upload-demo"
                ref="upload"
                multiple:false
                :action="filePath"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :on-change="handleChange"
                :file-list="fileList"
                :before-upload="check"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传ssl文件</div>
            </el-upload>
        </div>
        
    </div>
    
</template>

<script>
import {exportSys} from '@/api/ssl'
import service from '@/utils/request'
export default{
    data(){
        return {
            filePath:'',
            fileList:[]
        }
    },
    methods:{
        handleChange(file,fileList){
            this.fileList=[]
            this.fileList.push(file)
            console.log(fileList);
        },
        //处理导出事件
        handleExport(){
            exportSys()
        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log("remove "+file);
        },
        handleSuccess(response, file, fileList){
            this.fileList=[]
            this.$message({
                message:"上传成功",
                type:"success"
            })
        },
        check(file){
            let name=file.name
            console.log(name)
            if(!file.name.endsWith(".ssl")){
                this.$message({
                message:"只能上传ssl文件",
                type:"error"
            })
                return false
            }
        }
    },
    mounted(){
        this.filePath=service.url+"/file/import"
    }

}


</script>
<style scoped>
    .total{
        width: 50%;
        margin-left: 20px;
    }

    .middle{
        margin:20px auto;
    }
    .upload-div{
        margin:20px auto;
    }
    .font{
        color: #1E90FF; /* 设置标题颜色，这里是深蓝色 */
        margin-bottom: 10px; /* 添加标题底部间距 */
        text-align: left; /* 将标题左对齐 */
    }
</style>